<template>
	<view class="page flex-col justify-between">
		<view class="box_1 flex-row" :style="address.name=='施工评价'?'height:11.88vw':''">
			<view class="justify-between xing" v-show="address.name!='施工评价'">
				<view class="top-titile">整体评价</view>
				<view>
					<cc-starEvaluate :stars="stars" @click="setStar"></cc-starEvaluate>
				</view>
				<view class="bottom-titile">{{score}}分</view>
			</view>
			<view class="box_5 flex-row">
				<image class="label_1" referrerpolicy="no-referrer" @tap="$wanlshop.back(1)"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG433321c1e442565884c79fa7eafcfdde.png" />
				<text class="text_3">{{address.name=='施工评价'?'施工评价':'服务评价'}}</text>
				<text class="text_4" @click="submit">提交</text>
			</view>
		</view>
		<view class="box_8 flex-col" :style="address.name=='施工评价'?'top:13vw':''">
			<view class="block_1 flex-row" v-show="address.name!='施工评价'?'top:13vw':''">
				<text class="text_5">对师傅的评价</text>
				<view style="width: 85%;">
					<view class="text-wrapper_1" :style="item.isColor?'background:#FFEEDC':''"
						v-for="(item,index) in evaluate" :key="index" @click="evaluateBtn(index)">
						<text class="text_6" :style="item.isColor?'color:#FF8000':''">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="textare" :style="address.name=='施工评价'?'margin-top:2vw':''">
				<textarea placeholder-style="color:#808080" placeholder="展开说说您对本次服务的真实感受吧..."v-model="textAre" />
			</view>
			<view class="block_3 flex-row" v-if="address.name!='施工评价'">
				<text class="text_13">{{address.name}}</text>
				<div class="box_9 flex-col"></div>
				<text class="text_14">{{address.addres}}  </text>
				<text class="text_15">0/500</text>
			</view>
			<view class="block_3 flex-row" v-else>
				<text class="text_13">{{address.area}}</text>
				<text class="text_15" style="margin-left: 45vw;">0/500</text>
			</view>
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
					:data-url="imgList[index]">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage('imgList')" v-if="imgList.length<4">
		
				</view>
			</view>
			<view class="cu-load load-modal" v-if="loadModal">
				<image src="https://img.aibbyp.com/wechat/images/default/screen_icon_new.png" mode="aspectFit"></image>
				<view class="gray-text">{{loadingText}}...</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				address:{},
				textAre: '',
				score:0,
				imgList: [],
				imgListUrls: [],
				loadModal: false,
				loadingText: '上传中，请稍后',
				evaluate: [{
						name: '耐心细致',
						isColor: false
					},
					{
						name: '沟通能力强',
						isColor: false
					},
					{
						name: '态度好',
						isColor: false
					},
					{
						name: '工艺标准',
						isColor: false
					},
					{
						name: '测量仔细',
						isColor: false
					},
					{
						name: '认真负责',
						isColor: false
					}
				],
				stars: [{
						id: 1,
						types: false,

					},
					{
						id: 2,
						types: false,

					},
					{
						id: 3,
						types: false,

					},
					{
						id: 4,
						types: false,

					},
					{
						id: 5,
						types: false,

					},
				],
			};
		},
		
		onLoad(options) {
			console.log(options)
				this.address = options
		},
		methods: {
			// 总体评价
			setStar(value) {
				this.score = parseInt(value) * 20
				console.log(this.score)
				uni.showModal({
					title: '点击评价',
					content: '点击评价 = ' + value + '星'
				})
			},
			// 物流评价
			setStarTwo(value) {
				console.log("stars = " + value);
				uni.showModal({
					title: '点击评价',
					content: '点击评价 = ' + value + ' 星'
				})
			},
			LoadModal(e) {
				this.loadModal = true;
			},
			evaluateBtn(i) {
				this.evaluate[i].isColor = this.evaluate[i].isColor == true ? this.evaluate[i].isColor = false : this
					.evaluate[i].isColor = true
				// if(this.evaluate[i].isColor){
				// 	this.tags = this.evaluate[i].name
				// }
			},
			ChooseImage(event) {
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册,相机选择
					success: (res) => {
						console.log(res, '---')
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							this.uploadImage(event, res.tempFilePaths[i]);
						}
					},
					fail: (err) => {
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									this.$wanlshop.msg("䒵饰APP需要从您的相册获取图片，请在设置界面打开相关权限")
								}
							}
						})
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '您好',
					content: '确定要删除该图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.imgListUrls.splice(e.currentTarget.dataset.index, 1);
						}
					}
				})
			},
			submit(){
				let data ={
					call_id:this.address.id,
					score:this.score,
					remark:this.textAre,
					images:this.imgListUrls,
					tags:'态度好,耐心细致'
				}
				this.$api.post({
					url:'/jmy/call/addCommit',
					data:data,
					success:res=>{
						this.$wanlshop.msg('提交成功')
						if(this.address.name == '施工评价'){
							uni.$emit('orderList',res)
							this.$wanlshop.back(1)
						}else{
							this.$wanlshop.to('/pages/user/reservation/reservation')
						}
					}
				})
				console.log(data)
			},
			uploadImage(event, filePath) {
				this.LoadModal();
				this.$api.upload({
					url: '/common/upload',
					filePath: filePath,
					name: 'file',
					success: res => {
						switch (event) {
							case 'worker_avatar':
								this.worker_avatar = this.$wanlshop.oss(res.url);
								this.worker_avatar_url = res.url;
								break;
							case 'fron_id_card_image':
								this.fron_id_card_image = this.$wanlshop.oss(res.url);
								this.fron_id_card_image_url = res.url;
								break;
							case 'reverse_id_card_img':
								this.reverse_id_card_img = this.$wanlshop.oss(res.url);
								this.reverse_id_card_img_url = res.url;
								break;
							case 'imgList':
								this.imgList = this.imgList.concat(this.$wanlshop.oss(res.url));
								this.imgListUrls = this.imgListUrls.concat(res.url);
								this.register_background = "#FF4530";
								break;
						}
						this.loadModal = false;
					}
				});
			}
		},
	};
</script>
<style>
	.page {
		background-color:#FFF;
		position: relative;
		width: 100vw;
		height: 216.93vw;
		overflow: hidden;
	}

	.box_1 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 0px 0px 10px 10px;
		position: relative;
		width: 99.75vw;
		height: 37.88vw;
	}

	.text_1 {
		width: 18.47vw;
		height: 6.67vw;
		overflow-wrap: break-word;
		color: rgba(18, 18, 18, 1);
		font-size: 4.61vw;
		font-family: Source Han Sans-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 6.67vw;
		margin: 31.02vw 0 0 9.48vw;
	}

	.image_1 {
		width: 55.13vw;
		height: 11.03vw;
		margin: 28.71vw 0 0 2.3vw;
	}

	.text_2 {
		width: 9.75vw;
		height: 6.67vw;
		overflow-wrap: break-word;
		color: rgba(128, 128, 128, 1);
		font-size: 4.61vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 6.67vw;
		margin: 31.28vw 3.84vw 0 0.76vw;
	}

	.box_2 {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 12.31vw;
	}

	.image_2 {
		width: 8.47vw;
		height: 3.85vw;
		margin: 4.35vw 0 0 7.94vw;
	}

	.thumbnail_1 {
		width: 5.13vw;
		height: 3.59vw;
		margin: 4.61vw 0 0 62.05vw;
	}

	.thumbnail_2 {
		width: 4.11vw;
		height: 3.59vw;
		margin: 4.61vw 0 0 1.02vw;
	}

	.textare {
		font-size: 12px;
		margin-top: 16vw;
		height: 21vw;
		padding: 0 10px;
	}

	.box_3 {
		height: 3.08vw;
		background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/f9260fd8cdab41ca95f40e0104040b24_mergeImage.png) 100% no-repeat;
		background-size: 100% 100%;
		width: 6.42vw;
		margin: 4.87vw 3.84vw 0 1.02vw;
	}

	.box_4 {
		background-color: rgba(0, 0, 0, 1);
		border-radius: 1px;
		width: 4.88vw;
		height: 2.06vw;
		margin: 0.51vw 0 0 0.51vw;
	}

	.box_5 {
		position: absolute;
		left: 0;
		width: 100vw;
		height: 11.29vw;
	}

	.top-titile {
		position: relative;
		right: 20px;
		font-family: Source Han Sans;
		font-size: 18px;
		font-weight: 550;
		top: 10px;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #121212;
	}

	.bottom-titile {
		font-family: Source Han Sans;
		font-size: 18px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		position: relative;
		top: 10px;
		font-feature-settings: "kern" on;
		color: #808080;
	}

	.xing {
		align-items: center;
		margin-left: 40px;
		justify-content: space-between;
	}

	.label_1 {
		width: 5.67vw;
		height: 5.16vw;
		margin: 2.56vw 0 0 3.07vw;
	}

	.text_3 {
		width: 17.44vw;
		height: 6.42vw;
		overflow-wrap: break-word;
		color: rgba(18, 18, 18, 1);
		font-size: 4.35vw;
		font-family: Source Han Sans-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 6.42vw;
		margin: 2.56vw 0 0 31.53vw;
	}

	.text_4 {
		width: 7.7vw;
		height: 6.67vw;
		overflow-wrap: break-word;
		color: rgba(255, 69, 48, 1);
		font-size: 3.84vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 6.67vw;
		margin: 2.3vw 4.1vw 0 29.48vw;
	}

	.box_6 {
		height: 8.72vw;
		margin-top: 163.34vw;
		width: 100vw;
	}

	.box_7 {
		background-color: rgba(0, 0, 0, 1);
		border-radius: 25px;
		width: 35.9vw;
		height: 1.29vw;
		margin: 5.38vw 0 0 32.05vw;
	}

	.box_8 {
		position: absolute;
		left: 0;
		top: 40.95vw;
		width: 100vw;
		height: 154.36vw;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGbfc819785b9a28e9128c896cc46b5707.png) 100% no-repeat;
		background-size: 100% 100%;
	}

	.block_1 {
		width: 91.8vw;
		height: 6.93vw;
		margin: 3.07vw 0 0 4.1vw;
	}

	.text_5 {
		width: 23.08vw;
		height: 6.67vw;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 3.84vw;
		font-family: Source Han Sans-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 6.67vw;
		margin-top: 0.26vw;
	}

	.text-wrapper_1 {
		float: left;
		background-color: #F6F6F6;
		border-radius: 29px;
		height: 6.93vw;
		margin-left: 4.11vw;
		width: 19.49vw;
		margin-bottom: 10px;
		/* text-align: center; */
		line-height: 1.8;
	}

	.text_6 {
		width: 13.34vw;
		height: 4.88vw;
		overflow-wrap: break-word;

		font-size: 3.33vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 4.88vw;
		margin: 1.02vw 0 0 3.07vw;
	}

	.text-wrapper_2 {
		background-color: rgba(246, 246, 246, 1);
		border-radius: 29px;
		height: 6.93vw;
		margin-left: 3.08vw;
		width: 22.83vw;
	}

	.text_7 {
		width: 16.67vw;
		height: 4.88vw;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 3.33vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 4.88vw;
		margin: 1.02vw 0 0 3.07vw;
	}

	.text-wrapper_3 {
		background-color: rgba(246, 246, 246, 1);
		border-radius: 29px;
		height: 6.93vw;
		margin-left: 3.08vw;
		width: 16.16vw;
	}

	.text_8 {
		width: 10vw;
		height: 4.88vw;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 3.33vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 4.88vw;
		margin: 1.02vw 0 0 3.07vw;
	}

	.block_2 {
		width: 64.62vw;
		height: 6.93vw;
		margin: 3.07vw 0 0 31.28vw;
	}

	.text-wrapper_4 {
		background-color: rgba(246, 246, 246, 1);
		border-radius: 29px;
		height: 6.93vw;
		width: 19.49vw;
	}

	.text_9 {
		width: 13.34vw;
		height: 4.88vw;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 3.33vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 4.88vw;
		margin: 1.02vw 0 0 3.07vw;
	}

	.text-wrapper_5 {
		background-color: rgba(246, 246, 246, 1);
		border-radius: 29px;
		height: 6.93vw;
		margin-left: 3.08vw;
		width: 19.49vw;
	}

	.text_10 {
		width: 13.34vw;
		height: 4.88vw;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 3.33vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 4.88vw;
		margin: 1.02vw 0 0 3.07vw;
	}

	.text-wrapper_6 {
		background-color: rgba(246, 246, 246, 1);
		border-radius: 29px;
		height: 6.93vw;
		margin-left: 3.08vw;
		width: 19.49vw;
	}

	.text_11 {
		width: 13.34vw;
		height: 4.88vw;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 3.33vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 4.88vw;
		margin: 1.02vw 0 0 3.07vw;
	}

	.text_12 {
		width: 60.52vw;
		height: 6.67vw;
		overflow-wrap: break-word;
		color: rgba(128, 128, 128, 1);
		font-size: 3.58vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 6.67vw;
		margin: 6.15vw 0 0 4.1vw;
	}

	.block_3 {
		width: 92.06vw;
		height: 6.67vw;
		margin: 25.64vw 0 0 4.1vw;
	}

	.text_13 {
		height: 4.36vw;
		overflow-wrap: break-word;
		color: rgba(255, 85, 0, 1);
		font-size: 3.07vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 4.36vw;
		margin-top: 0.77vw;
	}

	.box_9 {
		width: 4.26vw;
		height: 2.57vw;
		border-left: 1px solid rgba(178, 178, 178, 1);
		margin: 1.79vw 0 0 1.79vw;
	}

	.text_14 {
		height: 4.36vw;
		overflow-wrap: break-word;
		color: rgba(255, 85, 0, 1);
		font-size: 3.07vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 4.36vw;
		margin: 0.76vw 0 0 -1.02vw;
	}

	.text_15 {
		width: 8.98vw;
		height: 6.67vw;
		overflow-wrap: break-word;
		color: rgba(178, 178, 178, 1);
		font-size: 3.07vw;
		font-family: Source Han Sans-Regular;
		font-weight: normal;
		text-align: left;
		line-height: 6.67vw;
		margin-left:27.77vw;
	}

	.image-wrapper_1 {
		width: 60.52vw;
		height: 25.65vw;
		margin: 3.07vw 0 0 35.38vw;
	}

	.image_3 {
		width: 29.24vw;
		height: 25.65vw;
	}

	.image_4 {
		width: 29.24vw;
		height: 25.65vw;
	}

	.image-wrapper_2 {
		width: 60.52vw;
		height: 25.65vw;
		margin: 2.05vw 0 0 35.38vw;
	}

	.image_5 {
		width: 29.24vw;
		height: 25.65vw;
	}

	.image_6 {
		width: 29.24vw;
		height: 25.65vw;
	}

	.block_4 {
		width: 60.52vw;
		height: 25.65vw;
		margin: 2.05vw 0 5.12vw 35.38vw;
	}

	.image_7 {
		width: 29.24vw;
		height: 25.65vw;
	}

	.image-wrapper_3 {
		background-color: rgba(242, 241, 246, 1);
		height: 25.65vw;
		width: 29.24vw;
	}

	.thumbnail_3 {
		width: 5.13vw;
		height: 5.13vw;
		margin: 10.25vw 0 0 12.05vw;
	}

	.block_5 {
		position: absolute;
		left: 0;
		top: -47.69vw;
		width: 4.11vw;
		height: 216.42vw;
	}

	.block_6 {
		position: absolute;
		left: 95.9vw;
		top: -47.69vw;
		width: 4.11vw;
		height: 216.42vw;
	}

	.image_8 {
		position: absolute;
		left: 3.85vw;
		top: 68.21vw;
		width: 29.24vw;
		height: 25.65vw;
	}

	.image_9 {
		position: absolute;
		left: 3.85vw;
		top: 95.9vw;
		width: 29.24vw;
		height: 25.65vw;
	}

	.image_10 {
		position: absolute;
		left: 3.85vw;
		top: 123.59vw;
		width: 29.24vw;
		height: 25.65vw;
	}

	body *,
	page view {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	body {
		font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
			Arial, PingFang SC-Light, Microsoft YaHei;
		margin: 0;
	}

	.solids {
		background-image: url("https://img.aibbyp.com/wechat/images/artison/register/unpload.png");
		background-position: right bottom, left top;
		background-repeat: repeat;
		background-size: cover;
	}

	button {
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		outline: none;
		background-color: transparent;
	}

	button:active {
		opacity: 0.6;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.align-start {
		display: flex;
		align-items: flex-start;
	}

	.align-center {
		display: flex;
		align-items: center;
	}

	.align-end {
		display: flex;
		align-items: flex-end;
	}
</style>